<template>
	<div>
		<el-card shadow="always" :body-style="{ padding: '20px' }">
			<CategorySelector />
		</el-card>
		<div>
			<SpuList v-if="type === 0" @changeType="changeType"></SpuList>
			<SpuForm v-if="type === 1" :spuInfo="spuInfo" @changeType="changeType"></SpuForm>
			<SkuForm v-if="type === 2" :spuInfo="spuInfo" @changeType="changeType"></SkuForm>
		</div>
	</div>
</template>

<script setup lang="ts">
import SpuList from "./components/SpuList/index.vue";
import SkuForm from "./components/SkuForm/index.vue";
import SpuForm from "./components/SpuForm/index.vue";
import { ref } from "vue";
import type { SpuInfoType } from "@/api/spu";
import { useCategoryStore } from "@/stores/category";
import { storeToRefs } from "pinia";

const type = ref(0);

const categoryStore = useCategoryStore();
const { category3Id } = storeToRefs(categoryStore);

// 保存完整的spuInfo数据
const spuInfo = ref<SpuInfoType>({
	category3Id: category3Id.value,
	description: "",
	spuName: "",
	spuImageList: [],
	spuSaleAttrList: [],
	tmId:0
});

// 自定义事件
const changeType = (newType: number, row?: SpuInfoType) => {
	type.value = newType;
	if (row) {
		// 把编辑传递的Spu数据保存在初始值上
		spuInfo.value = row; // 这里不需要深拷贝
	} else {
		// 当点击新增时 初始化spuInfo
		spuInfo.value = {
			category3Id: category3Id.value,
			description: "",
			spuName: "",
			spuImageList: [],
			spuSaleAttrList: [],
			tmId:0
		};
	}
};
</script>

<style scoped></style>
